<template>
	<view class="my_dangan">
		<view class="m_header">
			<changeOrgs ref="orgs" @listData="listData" :bindType="bindType"></changeOrgs>
		</view>
		<view class="d_box">
			<scroll-view :style="{height: height}" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
			@scroll="scroll">
				<view class="g_list">
					<view v-for="(items, indexx) in cardArr" :key="indexx">
						<view class="g_list_item" :class="item.cardState == 0 ? '' : 'guishibac'" v-for="(item, index) in items.cards" :key="index">
							<view class="g_list_item_box">
								<view class="account_box">
									<text class="g_txt g_top_txt">{{dangTxt(items.empName, index)}}</text>
								</view>
								<text class="g_txt">当前限制额度：{{item.limitAmount == null ? '无' : item.limitAmount.toFixed(2)}}</text>
								</view>
								<view class="g_list_item_box g_top_car">
									<text class="g_txt">卡号：{{item.cardNo}}</text>
									<text class="g_btn" @click="setting(item)">限额设置</text>
								</view>
								<view>
									<view class="wallet_box" v-for="(ite, ind) in item.wallets" :key="ind">
										<text class="g_txt">
											{{ite.walletType == 1 ? '现金账户余额' : ite.walletType == 3 ? '热水账户余额' : ite.walletType == 2 ? '补助账户余额' : ''}}：{{showEye && (ind == currentIndex) ? ite.balance.toFixed(2) : '****'}}
										</text>
										<image @click="changeEye(ind)" :src="showEye && (ind == currentIndex) ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'" class="eye_size"></image>
									</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()' okCor='#e74c3c' :okBtn='okBtn'></mcModal>
	</view>
</template>

<script>
	import { UnStudentBindEmp } from '../../common/api/index.js'
	import changeOrgs from '../../components/changeOrgs.vue'
	import { _showLoading, _showToast } from '../../common/js/util.js'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	export default {
		data() {
			return {
				userList: [],
				height: 0,
				bindType: '',
				content: '',
				title: '',
				showMcModal: false,
				okBtn: '',
				ite: {},
				showEye: false,
				item: {},
				cardArr: [],
				currentIndex: -1
			}
		},
		onLoad: function (option) {
		  this.cardArr = [...JSON.parse(decodeURIComponent(option.arrObj))]
		},
		components: {
			changeOrgs,
			mcModal
		},
		onShow:function(){
			let _that = this;
			uni.getSystemInfo({
				success: function (res) {
					_that.height = res.windowHeight - 102 + 'px';
				}
			})
		},
		computed: {
			dangTxt(name, index) {
				return function(name, index) {
					if(this.cardArr.length == 1) {
						return `${name}的卡账户`
					} else if(this.cardArr.length == 2) {
						if(index == 0) {
							return `${name}的卡账户一`
						} else {
							return `${name}的卡账户二`
						}
					} else if(this.cardArr.length == 3) {
						if(index == 0) {
							return `${name}的卡账户一`
						} else if(index == 1) {
							return `${name}的卡账户二`
						} else if(index == 2) {
							return `${name}的卡账户三`
						}
					}
				}
			}
		},
		methods: {
			setting(obj) {
				uni.navigateTo({
					url: './setting?itemObj=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			changeEye(index) {
				this.currentIndex = index
				this.showEye = !this.showEye
			},
			listData(arr, orgId) {
				this.userList = arr
			},
			bb() {
				this.showMcModal = false
			},
			cc() {
				this.showMcModal = false
				_showLoading('解绑中...')
				UnStudentBindEmp({
					empId: this.item.empId,
					bindType: this.ite.bindType == 0 ? 0 : 1,
					userId: uni.getStorageSync('s_userId')
				}).then(res => {
					if(res.resultCode == 0) {
						uni.hideLoading()
						_showToast('解绑成功...')
						this.$refs.orgs._queryStudentCardBalance()
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(243, 243, 243);
		overflow: hidden;
	}
	.my_dangan {
		.m_header {
			width: 100vw;
			height: 390rpx;
			background-image: url('');
			background-size: 100%;
			background-repeat: no-repeat;
			display: flex;
			justify-content: center;
		}
		.d_box {
			padding: 0 30rpx 20rpx 30rpx;
			width: 92%; 
			position: absolute;
			top: 200rpx;
		}
	}
	.g_list {
		position: absolute;
		top: 60rpx;
		width: 92%;
		left: 4%;
		background: #F6F6FF;
		box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.09);
		border-radius: 8rpx 8rpx 0 0;
		.g_list_item {
			padding: 20rpx;
			margin: 16rpx;
			background: #fff;
			.g_list_item_box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				line-height: 50rpx;
				.account_box {
					display: flex;
					flex-direction: row;
					align-items: center;
					.g_top_txt {
						font-size: 38rpx;
						font-family: "PingFangSC-Heavy, PingFang SC";
						font-weight: 600;
						color: #333333;
					}
					.eye_icon {
						width: 20px;
						height: 20px;
						margin-left: 14rpx;
					}
				}
			}
			.g_top_car {
				margin-top: 20rpx;
			}
			.wallet_box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}
		.guishibac {
			background: #ddd;
		}
	}
	.g_txt {
		font-size: 30rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
		line-height: 50rpx;
	}
	.g_btn {
		font-size: 30rpx;
		font-family: "PingFangSC-Medium, PingFang SC";
		font-weight: 500;
		color: #6B707A;
		border-radius: 5px;
		border: 1px solid #ddd;
		padding: 1px 10px;
	}
	.eye_size {
		width: 20px;
		height: 20px;
		margin-left: 14rpx;
	}
</style>